<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九州池 - 隋唐洛阳城皇家园林</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", "PingFang SC", sans-serif;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            line-height: 1.6;
            color: #333;
        }
        
        /* 导航栏 */
        .navbar {
            padding: 15px 50px;
            background: rgba(30, 30, 30, 0.9);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        .navbar.scrolled {
            padding: 10px 50px;
            background: rgba(30, 30, 30, 0.95);
        }
        .logo {
            font-size: 1.5em;
            font-weight: bold;
        }
        .nav-links {
            display: flex;
            list-style: none;
        }
        .nav-links li {
            margin-left: 30px;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 1.1em;
            transition: color 0.3s;
            position: relative;
        }
        .nav-links a:hover {
            color: #ffd700;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: #ffd700;
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }
        .nav-links a:hover::after {
            width: 100%;
        }
        
        /* 首页横幅 */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                        url('./img/九州池.jpg') center/cover;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            background-attachment: fixed;
            padding-top: 70px;
        }
        .hero-content {
            max-width: 800px;
            padding: 0 20px;
        }
        .hero h1 {
            font-size: 3.5em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .hero p {
            font-size: 1.5em;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        /* 按钮 */
        .cta-btn {
            display: inline-block;
            padding: 15px 30px;
            font-size: 1.2em;
            background: #ffd700;
            color: #333;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .cta-btn:hover {
            background: #e6c200;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
        
        /* 通用区块样式 */
        .section {
            padding: 80px 50px;
            text-align: center;
        }
        .section h2 {
            font-size: 2.5em;
            margin-bottom: 50px;
            color: #333;
            position: relative;
            display: inline-block;
        }
        .section h2::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            background: #ffd700;
            bottom: -15px;
            left: 25%;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 简介部分 */
        .intro-content {
            max-width: 1000px;
            margin: 0 auto;
            text-align: left;
        }
        .intro-image {
            margin: 40px 0;
            text-align: center;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .intro-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s;
        }
        .intro-image:hover img {
            transform: scale(1.03);
        }
        .intro-text {
            margin-top: 40px;
        }
        .intro-text h3 {
            font-size: 1.5em;
            margin: 30px 0 15px;
            color: #444;
            position: relative;
            padding-left: 15px;
        }
        .intro-text h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 80%;
            background: #ffd700;
            border-radius: 3px;
        }
        .intro-text p {
            margin-bottom: 20px;
            line-height: 1.8;
            padding: 0 20px;
        }
        
        /* 景点卡片 */
        .scenic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        .scenic-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .scenic-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        .scenic-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-bottom: 3px solid #ffd700;
        }
        .scenic-card h3 {
            margin: 20px 0 15px;
            color: #333;
        }
        .scenic-card p {
            padding: 0 20px 20px;
            color: #666;
        }
        
        /* 旅游信息 */
        .tourism-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
            padding: 0 20px;
        }
        .tourism-content h3 {
            margin: 30px 0 15px;
            color: #333;
            position: relative;
            padding-left: 15px;
        }
        .tourism-content h3::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 80%;
            background: #ffd700;
            border-radius: 3px;
        }
        .tourism-content p {
            margin-bottom: 15px;
            padding: 0 20px;
        }
        .tourism-content ul {
            margin: 20px 0;
            padding-left: 40px;
        }
        .tourism-content li {
            margin-bottom: 10px;
            list-style-type: square;
        }
        .tourism-content a {
            color: #8B4513;
            text-decoration: none;
            transition: color 0.3s;
        }
        .tourism-content a:hover {
            color: #e6c200;
            text-decoration: underline;
        }
        
        /* 联系表单 */
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .contact-form label {
            display: block;
            margin: 1rem 0 0.5rem;
            font-weight: bold;
            text-align: left;
            padding-left: 10px;
        }
        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 0.75rem;
            margin-bottom: 1.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        .contact-form input:focus,
        .contact-form textarea:focus {
            border-color: #ffd700;
            outline: none;
        }
        .contact-form button {
            background: #8B4513;
            color: #fff;
            border: none;
            padding: 0.75rem 1.5rem;
            cursor: pointer;
            border-radius: 4px;
            font-size: 1rem;
            transition: all 0.3s;
            width: 100%;
            font-weight: bold;
        }
        .contact-form button:hover {
            background: #6A3805;
            transform: translateY(-2px);
        }
        
        /* 页脚 */
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 30px;
            font-size: 0.9em;
        }
        
        
    </style>
</head>
<body>
    <!--导航栏-->
    <nav class="navbar" id="navbar">
        <div class="logo">九州池</div>
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#intro">简介</a></li>
            <li><a href="#scenic">景点</a></li>
            <li><a href="#tourism">旅游信息</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
    
    <!--首页横幅-->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>九州池</h1>
            <p>隋唐洛阳城皇家园林 · 千年古都的文化瑰宝</p>
            <a href="#intro" class="cta-btn">探索更多</a>
        </div>
    </section>
    
    <!-- 简介部分 -->
    <section id="intro" class="section">
        <div class="container">
            <h2>景区简介</h2>
            <div class="intro-content">
                <div class="intro-image">
                    <img src="./img/九州池全景.jpg" alt="九州池全景">
                </div>
                <div class="intro-text">
                    <h3>地理位置</h3>
                    <p>九州池位于河南省洛阳市西工区，是隋唐洛阳城宫城区的重要组成部分，始建于隋代，唐宋时期继续沿用。作为隋唐时期洛阳城的皇家园林，九州池见证了隋唐两代的繁荣与辉煌。</p>
                    
                    <h3>历史沿革</h3>
                    <p>九州池始建于隋大业元年(605年)，是隋炀帝营建东都洛阳时所建。唐代继续使用并扩建，成为皇宫内重要的园林景观。宋金时期仍在使用，元代后逐渐荒废。2019年，洛阳市政府对九州池遗址进行了保护性修复，使其重现昔日风采。</p>
                    
                    <h3>园林特色</h3>
                    <p>九州池以"九州"命名，寓意"普天之下，莫非王土"。池中有岛，岛上建有亭台楼阁，池水通过水渠与宫城其他水系相连。园内种植各种奇花异草，四季景色各异，是隋唐时期皇室贵族休闲娱乐的重要场所。</p>
                    
                    <h3>文化意义</h3>
                    <p>九州池不仅是隋唐时期皇家园林的代表，也是中国古代园林艺术的重要遗产。它见证了隋唐两代的兴衰更替，承载着丰富的历史文化信息。通过对九州池的考古发掘和保护展示，我们可以更好地了解隋唐时期的园林艺术和宫廷生活。</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 景点介绍 -->
    <section id="scenic" class="section">
        <div class="container">
            <h2>主要景点</h2>
            <div class="scenic-grid">
                <div class="scenic-card">
                    <img src="./img/九州池瑶光殿.jpg" alt="瑶光殿">
                    <h3>瑶光殿</h3>
                    <p>九州池的主殿，位于池中岛上，是皇室举行宴会和观赏歌舞的重要场所。殿名取自"瑶光"星，寓意美好祥和。</p>
                </div>
                
                <div class="scenic-card">
                    <img src="./img/九州池御花园.jpg" alt="御花园">
                    <h3>御花园</h3>
                    <p>位于九州池北侧，种植各种奇花异草，四季花开不败。园中有假山、亭台，是皇室成员赏花游憩之所。</p>
                </div>
                <div class="scenic-card">
                    <img src="./img/九州池九曲桥.jpg" alt="九曲桥">
                    <h3>九曲桥</h3>
                    <p>连接池岸与瑶光殿的桥梁，蜿蜒曲折，造型优美。桥上有亭台，是观赏池中景色的绝佳位置。</p>
                </div>
                <div class="scenic-card">
                    <img src="./img/九州池遗址展示区.jpg" alt="遗址展示区">
                    <h3>遗址展示区</h3>
                    <p>通过保护性展示，游客可以近距离观察隋唐时期的建筑遗址，了解古代建筑技艺和宫廷布局。</p>
                </div>
                <div class="scenic-card">
                    <img src="./img/九州池水榭.jpg" alt="水榭">
                    <h3>水榭</h3>
                    <p>建于池边的水上建筑，是观赏池中鱼鸟和荷花的绝佳位置。夏日荷花盛开时，水榭中凉风习习，清香四溢。</p>
                </div>
                <div class="scenic-card">
                    <img src="./img/九州池文化长廊.jpg" alt="文化长廊">
                    <h3>文化长廊</h3>
                    <p>展示隋唐时期的历史文化、诗词歌赋和园林艺术，让游客在欣赏美景的同时，感受中华文化的博大精深。</p>
                </div>
            </div>
        </div>
    </section>
    
    <!--旅游信息-->
    <section id="tourism" class="section">
        <div class="container">
            <h2>旅游信息</h2>
            <div class="tourism-content">
                <h3>开放时间</h3>
                <p>旺季(4月1日-10月31日): 8:30-20:30<br>
                   淡季(11月1日-3月31日): 8:30-18:00</p>
                
                <h3>门票信息</h3>
                <p>成人票：58元/人<br>
                   学生票：29元/人 (凭有效学生证)<br>
                   60岁以上老人、军人、残疾人凭有效证件免费</p>
                
                <h3>交通指南</h3>
                <p><strong>公交：</strong>乘坐1路、5路、10路、22路、34路、48路、101路、103路等到中州中路定鼎路口站下车<br>
                   <strong>地铁：</strong>乘坐地铁1号线到应天门站下车，步行约10分钟<br>
                   <strong>自驾：</strong>导航至"隋唐洛阳城九州池遗址公园"即可</p>
                
                <h3>联系方式</h3>
                <p>地址：河南省洛阳市西工区中州中路与定鼎北路交叉口<br>
                   电话：0379-65063201<br>
                   官方网站：<a href="http://www.lyjiuzhouchi.com">www.lyjiuzhouchi.com</a></p>
                
                <h2>参观须知</h2>
                <ul>
                    <li>请爱护文物古迹，不要在文物上涂写刻画</li>
                    <li>园区内禁止吸烟、乱扔垃圾</li>
                    <li>请勿携带宠物入园</li>
                    <li>大型活动期间请遵守园区管理规定</li>
                    <li>如遇特殊情况，请服从工作人员安排</li>
                </ul>
                
                <h2>推荐游览路线</h2>
                <p>1. 南门入园 → 瑶光殿 → 九曲桥 → 御花园 → 水榭 → 北门出园<br>
                   2. 东门入园 → 文化长廊 → 遗址展示区 → 御花园 → 瑶光殿 → 西门出园</p>
                
                <h2>游客评价</h2>
                <p>"九州池的夜景太美了，灯光映照下的古建筑仿佛穿越回了大唐盛世！" - 李女士</p>
                <p>"带孩子来这里了解隋唐历史非常好，遗址展示区让孩子直观感受到了古代建筑的魅力。" - 张先生</p>
                <p>"园林设计很精致，一步一景，是拍照打卡的好地方。" - 王小姐</p>
            </div>
        </div>
    </section>
    
    <!--联系我们-->
    <section id="contact" class="section">
        <div class="container">
            <h2>联系我们</h2>
            <div class="contact-form">
                <form id="contact-form">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="name" required placeholder="请输入您的姓名">

                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="email" required placeholder="请输入您的邮箱">

                    <label for="message">留言:</label>
                    <textarea id="message" name="message" required placeholder="请输入您的留言" rows="6"></textarea>

                    <button type="submit">提交</button>
                </form>
            </div>
        </div>
    </section>
    
    
    <footer>
        <p>© 2025 隋唐洛阳城九州池遗址公园 版权所有</p>
        <p>地址：河南省洛阳市西工区中州中路与定鼎北路交叉口 | 电话：0379-65063201</p>
        <p>© 2025 软件工程张诗佳 版权所有 | 2410250403</p>
    </footer>
    
    
    <script>
        
        
        // 表单提交
        document.getElementById('contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('留言已提交，我们会尽快与您联系！');
            this.reset();
        });
    </script>
</body>
</html>